import Taro, { Component } from '@tarojs/taro';
import { View, Text, Button, Input } from '@tarojs/components';
import NavigationBar from '../../../components/navigationBar/index';
import Search from '../../../static/public/icon_search.png';
import CardBox from '../../../components/card-record';

import './index.scss';
import { storageRecord } from '../../../services/card';
import { timeFormat } from '../../../utils/utils';
export default class Index extends Component {

  config = {
    navigationBarTitleText: '',
  }

  state = {
    type: 0,  // 0 入库 1 出库
    title: '',
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    search: '',
    pageData: {
      page: 1,
      page_number: 10,
    },
    list: [],
    isMore: false,
  }

  componentWillMount() {
    let type = parseInt(this.$router.params.type, 10)
    this.setState({
      type: type,
      title: type ? '出库记录' : '入库记录',
    }, () => {
      this.search()
    })
  }
  componentDidMount() { }
  componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }

  onReachBottom() {
    this.search()
  }

  search() {
    storageRecord({
      nickname: this.state.type ? this.state.search : '',
      type: !this.state.type ? 1 : 0,
      card_type: this.state.type ? '' : this.state.search,
      ...this.state.pageData,
    }).then(res => {
      res.list.forEach(item => {
        item.time = timeFormat(item.create_time)
      })
      this.setState({
        list: res.list,
        isMore: res.list.length < res.total
      })
    })
  }

  handleSearch(e) {
    console.log(e)
    this.setState({
      search: e.detail.value,
      pageData: {
        page: 1,
        page_number: 10
      },
      isMore: false,
      list: [],
    }, () => {
      this.search()
    })
  }

  render() {
    const { title, type, navigationBarHeight, search, list } = this.state
    return (
      <View className="storage-record" style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text={title} />
        <View className="search-wrapper" style={`top: ${navigationBarHeight}`}>
          <Input className="input" value={search} onInput={(e) => {this.handleSearch(e)}} placeholder={type ? '搜索代理' : '搜索类型'} type="text" />
          <Image src={Search} className="search-icon" />
        </View>
        {
          list.map(card => {
            if (card) return <CardBox
              key={card.id}
              agency={type ? `${card.has_user.nickname}(${card.has_user.mobile})` : ''}
              type={type ? 6 : 5}
              time={card.time}
              cardType={card.has_card.has_card_type.attr_name}
              number={card.has_card.card_no}
              status={''}
            />
          })
        }
      </View>
    );
  }
}
